import React from "react";
import ReactDOM from "react-dom";
import '../css/dice.scss';
import {Log} from '../utils/CommonUtil.js';
// 优化代码:
// 1.代替重复且有规律的代码：
// (1)封装组件  
// (2)map循环
// 
//自定义组件传值props 
// (1){}中可以是JavaScript的基本数据类型或变量
// (2)无{}只能传字符串

//jsx 的标签中的{}里面可以写 三目表达式、map 、foreach、函数、state、props

//div dice-contain
    //div box-contain
        //div box-contain01
    //div dot-contain
        //div dot


class DotBox extends React.Component {
    
    //设置默认的props
    static defaultProps = {
        cN:'',
        num:1,
    }

    render() {
        let cNV = "dice-box " + this.props.cN;
        let arr = [];
        for (let index = 1; index <= this.props.num; index++) {
            arr.push(index);
        }
        return (
            <div className="dot-box-contain">
                <div className={cNV}>
                    {arr.map((item,index)=>{
                        return <span className="dot" ></span>
                    })}
                </div>
            </div>
        );
    }
}


class Dice extends React.Component {

    componentDidMount() {

    }

    render(){

        let arr = [];
        let arr1 =[];
        for (let index = 1; index < 10; index++) {
            arr.push(index);
            if (index<7) {
                arr1.push(index);
            }
        }
        

        return (<div className="dice-contain">
                {
                    //true?'a':'b' 大括号里面可以写 三目表达式、map 、foreach
                }

                {arr1.map((i)=>{
                    let cM ="dice-contain0"+i;
                    return  <div className={cM}>
                        {arr.map((item)=>{
                            let cN = "dice-box0"+item;
                            return <DotBox cN={cN} num={i} />
                        })}
                    </div> 
                })}
               
                
                {/* <div className="dice-contain01">
                    {arr.map((item,index)=>{
                        let cN = "dice-box0"+item;
                        return <DotBox cN={cN} num={1} />
                    })}
                </div>   */}
                
               
            </div>
        )
    }
}

export default Dice;